<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="dialogFormVisible" @close="quxiao">
      <el-row :gutter="20" class="mb">
        <el-col :span="6"> 【题型】：{{ formatter(formDate) }} </el-col>
        <el-col :span="6"> 【编号】：{{ formDate.id }} </el-col>
        <el-col :span="6"> 【难度】：{{ difficultylist(formDate) }}</el-col>
        <el-col :span="6"> 【标签】:{{ formDate.tags }}</el-col>
      </el-row>
      <el-row :gutter="20" class="mb">
        <el-col :span="6"> 【学科】：{{ formDate.subjectName }} </el-col>
        <el-col :span="6"> 【目录】：{{ formDate.catalogID }} </el-col>
        <el-col :span="6"> 【方向】： {{ formDate.direction }}</el-col>
      </el-row>
      <hr />
      <el-row :gutter="20" class="mb">
        <el-col :span="6" class="mb"> 【题干】： </el-col>
        <el-row>
          <el-col class="tigan co mb">{{
            qusetionlist(formDate.question)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col class="tigan mb">
            {{ titype }}
          </el-col>
        </el-row>
        <el-row>
          <el-radio-group
            v-if="formDate.questionType == 1"
            class="radiocheck"
            v-model="radio1"
          >
            <el-radio
              v-for="item in formDate.options"
              :key="item.id"
              :label="item.isRight"
              :disabled="item.isRight === 0"
              class="radio lt"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
          <div v-if="formDate.questionType === '2'">
            <el-row
              v-for="(item, index) in options"
              :key="index"
              style="margin: 10px 0px"
            >
              <el-checkbox
                v-model="item.isRight"
                :disabled="item.isRight === 0"
                class="lt"
              >
                {{ item.title }}
              </el-checkbox>
            </el-row>
          </div>
        </el-row>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          【参考答案】：<el-button
            type="danger"
            size="small"
            @click="showViedo = true"
            >查看答案预览</el-button
          >
          <el-row class="lt" v-if="showViedo">
            <video
              :src="formDate.videoURL"
              controls="controls"
              class="video"
            ></video>
          </el-row>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col> 【答案解析】：{{ qusetionlist(formDate.answer) }} </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col> 【题目备注】：{{ formDate.remarks }} </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer flexend">
        <el-button @click="quxiao">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: true
    },
    yulandata: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      formDate: this.yulandata,
      radio1: 1,
      showViedo: false
    }
  },
  methods: {
    quxiao () {
      this.$emit('update:dialogFormVisible', false)
    },
    // 提醒转换
    formatter (formDate) {
      const obj = questionType.find(
        (item) => item.value == formDate.questionType
      )
      return obj ? obj.label : '未知'
    },
    // 难度转换
    difficultylist (formDate) {
      const obj = difficulty.find((item) => item.value == formDate.difficulty)
      return obj ? obj.label : '未知'
    },
    // 题干转换
    qusetionlist (question) {
      const res = question.replace(/<.*?>/gi, '')
      return res
    }
  },
  computed: {
    titype: function () {
      if (this.formDate.questionType == 1) {
        return '单选题 选项：（以下选中的选项为正确答案）'
      } else if (this.formDate.questionType == 2) {
        return '多选题 选项：（以下选中的选项为正确答案）'
      } else {
        return '简答题'
      }
    },
    options: function () {
      if (this.formDate.questionType == 2) {
        if (!this.formDate.options) {
          return
        }
        this.formDate.options.forEach((item) => {
          if (item.isRight == 1) {
            item.isRight = true
          }
        })
        return this.formDate.options
      } else {
        return this.formDate.options
      }
    }
  },
  watch: {
    yulandata: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.formDate = newVal
        }
      },
      deep: true, // 深度监听
      immediate: true // 初始化监听
    }
  }
}
</script>

<style scoped lang='less'>
.mb {
  margin-bottom: 15px;
}
.tigan {
  margin-left: 15px;
}

.co {
  color: blue;
}

.flexend {
  display: flex;
  justify-content: end;
}

.lt {
  margin-left: 10px;
}

.radio {
  display: block;
  margin-bottom: 10px;
}

.video {
  width: 500px;
  height: 350px;
}
</style>
